<template>
    <div>
        <el-card>
            <el-form class="search" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
                     @submit.native.prevent>
                <el-form-item prop="modelKey">
                    <el-input
                        v-model="queryParams.modelKey"
                        placeholder="模型Key"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item prop="modelName">
                    <el-input
                        v-model="queryParams.modelName"
                        placeholder="模型名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item prop="category">
                    <el-input
                        v-model="queryParams.category"
                        placeholder="流程分类"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                    >新流程
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                        type="danger"
                        icon="el-icon-delete"
                        size="mini"
                        :disabled="multiple"
                        @click="handleDelete"
                    >删除
                    </el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>

            <el-table v-loading="loading" :data="modelList" border @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column label="模型ID" align="center" prop="id" width="100"/>
                <el-table-column label="模型Key" align="center" prop="modelKey"/>
                <el-table-column label="模型名称" align="center" prop="modelName"/>
                <el-table-column label="流程分类" align="center" prop="category"/>
                <el-table-column label="版本号" align="center" prop="version"/>
                <el-table-column label="创建时间" align="center" prop="createDt" width="180"/>
                <el-table-column label="更新时间" align="center" prop="updateDt" width="180"/>
                <el-table-column label="创建人" align="center" prop="createUser"/>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
                    <template slot-scope="{row}">
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-brush"
                            @click="handleDesign(row)"
                        >设计
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-search"
                            @click="handleView(row)"
                        >查看
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="handleDelete(row)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />

        </el-card>

        <el-dialog title="流程查看" :visible.sync="open" width="70%" append-to-body>
            <process-viewer :xml="form.bpmnXml" :style="{height: '800px'}"/>
        </el-dialog>
    </div>
</template>

<script>
    import {pageModel, delModel, getModel} from '@/api/app/workflow/model'
    import ProcessViewer from '@/components/ProcessViewer'

    export default {
        name: 'Define',
        components: {ProcessViewer},
        data() {
            return {
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 消息提醒表格数据
                modelList: [],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 20,
                    modelKey: null,
                    modelName: null,
                    category: null
                },
                open: false,
                form: {}
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.loading = true
                pageModel(this.queryParams).then(res => {
                    this.modelList = res.data.rows
                    this.total = res.data.total
                    this.loading = false
                })
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getList()
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm('queryForm')
                this.handleQuery()
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids
                this.$confirm('是否确认删除?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    return delModel(ids)
                }).then(() => {
                    this.getList()
                    this.msgSuccess('删除成功')
                })
            },
            handleDesign(row) {
                this.$router.push({path: '/workflow-model', query: {modelId: row.id}})
            },
            handleAdd() {
                this.$router.push({path: '/workflow-model'})
            },
            handleView(row) {
                this.open = true
                getModel(row.id).then(res => {
                    this.form = res.data
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
</style>
